<!--
    @name 召回/服务活动详情
    @author haoyang.ding
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="70%"
    height="50%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="close"
    @open="open"
  >
    <dialogHeader
      slot="title"
      :title="titleName"
      :style-type="$store.state.app.dialogType"
    />
    <OneTableTemplate
      :dynamic-components="formInputs_1"
      :dynamic-form-fields="formField1"
    />
    <div class="filter-container filter-title">活动信息</div>
    <OneTableTemplate
      :dynamic-components="formInputs_2"
      :dynamic-form-fields="formField2"
    />
    <!-- 维修项目 -->
    <div class="filter-container filter-title">维修项目</div>
    <OneTableTemplate
      ref="table_1"
      :dynamic-table-cols="tableHeader_1"
      :is-show-pagination="false"
      :dynamic-is-show-select="false"
    />
    <!-- 维修备件 -->
    <div class="filter-container filter-title">维修备件</div>
    <OneTableTemplate
      ref="table_2"
      :dynamic-table-cols="tableHeader_2"
      :is-show-pagination="false"
      :dynamic-is-show-select="false"
    />
    <!-- 维修备件 -->
    <div class="filter-container filter-title">其他项目</div>
    <OneTableTemplate
      ref="table_3"
      :dynamic-table-cols="tableHeader_3"
      :is-show-pagination="false"
      :dynamic-is-show-select="false"
    />
  </el-dialog>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/paSparePartsManagement'
export default {
  name: 'OrderDetails',
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader')
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    // 是否关闭弹窗
    dialogVisible: {
      type: Boolean,
      default: false
    },
    allList: {
      type: Boolean,
      default: false
    },
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      titleName: '召回/服务活动详情',
      chooseListAll: {
        wiList: [],
        paList: [],
        otherList: []
      },
      formInputs_1: [
        {
          compKey: 'key0',
          labelName: '车牌号：',
          codeField: 'CAR_LICENSE',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: 'VIN码：',
          codeField: 'VIN',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车主姓名：',
          codeField: 'CUST_NAME',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      formField1: {
        CAR_LICENSE: '',
        VIN: '',
        CUST_NAME: ''
      },
      formInputs_2: [
        {
          compKey: 'key0',
          labelName: '活动编号：',
          codeField: 'ACTION_CODE',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '活动类型：',
          codeField: 'actionTypeCode',
          lookuptype: 'VE0185',
          customObj: {
            api: orgApis.actionTypeList,
            defOptionFields: ['actionTypeCode', 'actionTypeName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key2',
          labelName: '活动主题：',
          codeField: 'ACTION_NAME',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key3',
          labelName: '开始时间：',
          codeField: 'BEGIN_DATE',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key4',
          labelName: '结束时间：',
          codeField: 'END_DATE',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '发布时间：',
          codeField: 'PUBLISH_DATE',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key6',
          labelName: '发布人：',
          codeField: 'PUBLISHER',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '发布人电话：',
          codeField: 'ACTION_CUST_DESC',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '活动详情：',
          codeField: 'OPRATE_CODE',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 24
        }
      ],
      formField2: {
        ACTION_CODE: '',
        actionTypeCode: '',
        ACTION_NAME: '',
        BEGIN_DATE: '',
        END_DATE: '',
        PUBLISH_DATE: '',
        PUBLISHER: '',
        ACTION_CUST_DESC: '',
        OPRATE_CODE: ''
      },
      tableHeader_1: [
        {
          label: '工时编码',
          prop: 'OPRATE_CODE'
        },
        {
          label: '维修内容',
          prop: 'REPAIR_CONTENT'
        },
        {
          label: '工时数',
          prop: 'REPAIR_COUNT'
        },
        {
          label: '备注',
          prop: 'REMARK'
        }
      ],
      tableHeader_2: [
        {
          label: '备件编码',
          prop: 'PART_NO'
        },
        {
          label: '备件名称',
          prop: 'PART_NAME'
        },
        {
          label: '数量',
          prop: 'PART_COUNT'
        },
        {
          label: '备注',
          prop: 'REMARK'
        }
      ],
      tableHeader_3: [
        {
          label: '其他项目名称',
          prop: 'repairOtherName'
        },
        {
          label: '费用合计',
          prop: 'otherAmount'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ]
    }
  },
  watch: {
    allList: {
      immediate: true,
      handler(value) {
        if (value == true) {
          this.getMoreDetail()
          this.getItemsAppear()
          this.getserviceActionTime()
          this.queryOtherList()
        }
      }
    }
  },
  mounted() {

  },
  methods: {
    chooseToFath() {
      this.chooseListAll.wiList.forEach(element => {
        element.wiCode = element.OPRATE_CODE
        element.wiName = element.REPAIR_CONTENT
        element.saleWorkQty = element.REPAIR_COUNT
        element.note = element.REMARK
        element.wiPrice = 0
        element.wiAmount = ''
        element.groupName = ''
        element.repairTechnician = ''
        element.workshopEmpId = ''
        element.wiPreAmount = ''
        element.isEntrust = ''
        element.isEntrustCode = ''
        element.retRepairTypeName = ''
        element.retRepairType = ''
        element.comboSaleCode = ''
        element.repairGroup = ''
        element.repairTypeCode = ''
        element.repairTypeName = ''
      })
      this.chooseListAll.paList.forEach(element => {
        element.partNo = element.PART_NO
        element.partName = element.PART_NAME
        element.partQty = element.PART_COUNT
        element.note = element.REMARK
        element.retRepairTypeName = ''
        element.repairTypeName = ''
        element.repairTypeCode = ''
        element.outQty = 0
        element.partPrice = 0
        element.partAmount = 0
        element.prePartAmount = 0
        element.comboSaleCode = ''
        element.isEntrustCode = ''
        element.isEntrust = ''
      })
      this.chooseListAll.otherList.forEach(element => {
        element.payKindName = ''
        element.retRepairTypeName = ''
        element.servicePackageCode = ''
        element.repairOtherId = ''
        element.remark = element.remark
        element.otherAmountType = element.repairOtherName
        element.otherAmount = element.otherAmount
      })
      this.$emit('toList', this.chooseListAll)
    },
    close() {
      this.$emit('close')
      this.dialogVisible = false
      this.$emit('update:dialogVisible', false)
    },
    getMoreDetail() {
      const that = this
      const formObj = {
        actionCode: ''
      }
      formObj.actionCode = this.dynamicEditRowData.ACTION_CODE
      const queryObj = {
        // 保存mutation
        // type: "mutation",
        // api配置
        apiConfig: orgApis.serviceActionMoreQuery,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: formObj
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === '1') {
          for (const key in that.formField1) {
            that.formField1[key] = response.rows[0][key]
          }
          for (const key in that.formField2) {
            that.formField2[key] = response.rows[0][key]
          }
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            uration: 1000
          })
        }
      })
    },
    getItemsAppear() {
      const that = this
      const formObj = {
        actionCode: ''
      }
      formObj.actionCode = this.dynamicEditRowData.ACTION_CODE
      const queryObj = {
        // 保存mutation
        // type: "mutation",
        // api配置
        apiConfig: orgApis.serviceActionQueryTsyhg,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: formObj
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === '1') {
          that.chooseListAll.wiList = response.rows
          this.$refs['table_1'].list = response.rows
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            uration: 1000
          })
        }
      })
    },
    getserviceActionTime() {
      const that = this
      const formObj = {
        actionCode: ''
      }
      formObj.actionCode = this.dynamicEditRowData.ACTION_CODE
      const queryObj = {
        apiConfig: orgApis.serviceActionTime,
        variables: formObj
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === '1') {
          that.chooseListAll.paList = response.rows
          this.$refs['table_2'].list = response.rows
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            uration: 1000
          })
        }
      })
    },
    queryOtherList() {
      const that = this
      const formObj = {
        actionCode: ''
      }
      formObj.actionCode = this.dynamicEditRowData.ACTION_CODE
      const queryObj = {
        apiConfig: orgApis.queryOtherList,
        variables: formObj
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === '1') {
          that.chooseListAll.otherList = response.rows
          that.chooseToFath()
          this.$refs['table_3'].list = response.rows
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            uration: 1000
          })
        }
      })
    },
    open() {
      this.getMoreDetail()
      this.getItemsAppear()
      this.getserviceActionTime()
      this.queryOtherList()
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table {
    height: 170px !important;
  }
  /deep/ .filter-params {
    margin-top: 5px !important;
  }
</style>
